import React from 'react'
import { CSSTransition } from 'react-transition-group'
import './Comment.scss'

const commentData1 = [
    { id: 1, text: '这是评论' },
    { id: 1, text: '假的评论' },
    { id: 1, text: '无后端' },
    { id: 1, text: '无映射' },
    { id: 1, text: '只有静态' },
    { id: 1, text: '以后再改' }
]
class Comment extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            iscomment: true,
            commentData:commentData1,
            values:""
        }
        this.onChangehandle = this.onChangehandle.bind(this);
        this.sendhandle = this.sendhandle.bind(this)
    }
    onChangehandle(e){
        this.setState({values:e.target.value})
    }

    sendhandle(text,id){
        if(!text) return;
        this.setState({commentData:[...this.state.commentData,{id:id,text:text}]});
        this.setState({values:""})
        console.log('11111')
    }

    render() {
        return (
            <CSSTransition
                in={this.state.iscomment}
                timeout={200}
                appear={true}
                classNames="fade"
                onEnter={el => {
                    console.log('0k')
                }}>
                <ol className='comment-box'>
                    <li className="btn-toggle" onClick={() => { console.log(this.state.iscomment); this.setState({ iscomment: !this.state.iscomment }) }}>
                        <div className={!this.state.iscomment ? "btn-toggle-icon active" : " btn-toggle-icon "}></div>
                    </li>
            评论区:
            {
                        this.state.commentData.map((item, index) => {
                            return (
                                <li key={index} className="comment-content">{item.text}</li>
                            )
                        })
                    }
                    <li className="comment-inpput"><input type="text" value={this.state.values} 
                        onChange={this.onChangehandle}/>
                        <span onClick={()=>{this.sendhandle(this.state.values,'id')}}>Send</span>
                    </li>
                </ol>
            </CSSTransition>)
    }
}
export default Comment